<template>
  <div class="course-list">
    <!--<div class="subject flex-c">-->
      <!--<div class="subject-list h-100 flex-l-c">-->
        <!--<label>学科：</label>-->
        <!--<span class="subject-item flex-c can-click" v-for="(item, i) in subjectList" :key="i" :class="{'active': item.active}" @click="chooseSubject(item)">{{ item.courseType }}</span>-->
      <!--</div>-->
    <!--</div>-->
    <x-course-list class="course-list-wrap" :list="list" :pagination="true" :currentPage="currentPage" :total="total"></x-course-list>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return {
        subjectList: [],
        list: [],
        currentPage: 1,
        pageSize: 12,
        total: 0,
        courseTypeId: '', // 课程分类id
      }
    },
    created(){
      this.getCourseType();
      this.getList();
    },
    mounted(){},
    methods: {
      getCourseType(){
        let param = {};
        this.Request.courseTypeList({params: param}).then(res=>{
          let arr = [
            { courseType: '全部', active: true }
          ];
          if(res.data.length){
            res.data.forEach((item)=>{
              this.$set(item, 'active', false);
            })
          }
          this.subjectList = arr.concat(res.data);
        })
      },
      getList(){
        let param = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          userId: sessionStorage.userId,
          // courseTypeId: this.courseTypeId
        };
        this.Request.getMyCourseList({params: param}).then(res=>{
          this.list = res.data || [];
          this.total = res.total || 0;
        })
      },
      chooseSubject(item){
        for(let item of this.subjectList){
          item.active = false;
        };
        item.active = true;
        this.courseTypeId = item.id ? item.id : '';
        this.currentPage = 1;
        this.getList();
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../css/module/index";
</style>
